<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <form action="http://www.baidu.com" >
        用户名:<input type="text" v-model="user.username"/><br>
<!--        用户详情：<textarea v-model="info" width="500px height=400px"/><br>-->
        <select name="book" v-model="user.book">
            <option value="java" >java</option>
            <option value="spring">spring</option>
            <option value="mybatis">mp</option>
        </select><br>
        <input type="radio" v-model="user.sex" value="男" name="sex"/>男
        <input type="radio"  value="女" name="sex" v-model="user.sex"/>女
        <hr>
        <input type="checkbox" name="hobby" value="lanqiu" v-model="user.hobby"/>篮球
        <input type="checkbox" value="zuqiu" v-model="user.hobby"/>足球
        <input type="checkbox" value="taiqiu" v-model="user.hobby"/>台球
        <input type="submit" value="提交" @click.prevent="addForm"/>
    </form>
</div>
<script src="../js/vue.js"></script>
<script>
    const app=new Vue({
        el:"#app",
        data:{
            user:{username:"",info:'',book:'java',sex:'男',hobby:'台球'}
        },
        methods:{
            addForm(){console.log(123+this.user.username+user.info)}
        }
    })

</script>
</body>
</html>